<template>
  <div class="app-container">
    <el-button
      v-show="!show"
      class="collapesbutton"
      type="primary"
      plain
      style="left: 0; top: 100px; height: 10%"
      @click="show = !show"
    >
      <i class="el-icon-d-arrow-right"></i>
    </el-button>
    <section style="height: 100%; margin: 0; width: 100%">
      <div
        style="width: calc(15% - 6px); float: left"
        class="treeMenu"
        v-show="show"
      >
        <el-button
          class="collapesbutton"
          type="primary"
          plain
          style="right: 1px; top: 50px; height: 10%"
          @click="show = !show"
        >
          <i class="el-icon-d-arrow-left"></i>
        </el-button>
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane name="tree" v-if="treeData.length > 0">
            <span slot="label"><i class="el-icon-document"></i></span>
            <dynamic-tree
              :treeData="treeData"
              @handleNodeClick="handleNodeClick"
              :showIcon="true"
            >
            </dynamic-tree>
          </el-tab-pane>
        </el-tabs>
      </div>
      <resize-bar v-show="show" />
      <div
        style="
          min-width: 75%;
          max-width: 95%;
          padding: 10px 10px 0;
          height: 100%;
          width: 85%;
          float: right;
          box-sizing: border-box;
        "
        :class="show ? '' : 'max-size'"
      >
        <div class="mainContent">
          <template v-if="portal">
            <portal-view :params="portal" :root="this" />
          </template>
          <template v-else>
            <el-row class="manage-header">
              <el-form
                :inline="true"
                :model="queryParams"
                ref="queryForm"
                label-width="auto"
                @submit.native.prevent
              >
                <el-form-item
                  v-if="
                    searchFormData.length != 0 &&
                      searchFormData[0].status === '1'
                  "
                  :key="searchFormData[0].prop"
                  :label="searchFormData[0].name"
                >
                  <el-input
                    size="small"
                    v-model="queryParams[searchFormData[0].prop]"
                    :placeholder="'请输入' + searchFormData[0].name"
                  ></el-input>
                </el-form-item>
                <el-form-item v-if="searchFormData.length != 0">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索
                  </el-button>
                  <el-button
                    type="info"
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置
                  </el-button>
                  <el-button
                    v-if="searchFormData.length > 1"
                    icon="el-icon-arrow-down"
                    size="mini"
                    id="more-attr"
                    @click="moreattr"
                    >更多属性
                  </el-button>
                </el-form-item>
                <div id="more-list" style="display: none">
                  <el-form-item
                    v-for="item in searchFormData.slice(1)"
                    :key="item.prop"
                    :label="item.name"
                  >
                    <template v-if="item.status === '1'">
                      <!--根据type来显示是什么标签-->
                      <el-select
                        v-model="queryParams[item.prop]"
                        placeholder="请选择"
                        v-if="item.componentType === 'el-select'"
                      >
                        <el-option
                          v-for="item in item.optionValue"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-date-picker
                        v-model="queryParams[item.prop]"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        v-if="item.componentType === 'el-date-picker'"
                      >
                      </el-date-picker>
                      <el-input
                        size="small"
                        v-model="queryParams[item.prop]"
                        :placeholder="'请输入' + item.name"
                        v-else
                      >
                      </el-input>
                    </template>
                  </el-form-item>
                </div>
              </el-form>
            </el-row>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5" v-if="operational !== '0'">
                <template v-for="(toolbar, index) in toolbarData">
                  <template v-if="toolbar.data.length >= 4">
                    <el-dropdown
                      style="padding: 0; margin: 0 10px"
                      :key="index"
                    >
                      <el-button type="primary" size="mini">
                        <i :class="toolbar.info.icon"></i>
                        {{ toolbar.info.description }}
                        <i class="el-icon-arrow-down"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <div v-for="(btn, key) in toolbar.data" :key="key">
                          <el-dropdown-item
                            v-if="btn.status === '1' && btn.location === '2'"
                          >
                            <el-button
                              size="mini"
                              type="text"
                              :icon="btn.icon"
                              v-preventReClick
                              :disabled="
                                btn.show != null &&
                                btn.show != undefined &&
                                btn.show != ''
                                  ? !dynamicEval($data, btn.show)
                                  : false
                              "
                              @click="clickEvent(btn, $event)"
                              >{{ btn.name }}</el-button
                            >
                          </el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                  <template v-else>
                    <template v-for="btn in toolbar.data">
                      <template v-if="btn.name == '全编辑'">
                        <el-button
                          v-if="!editall"
                          :type="btn.styleType"
                          :icon="btn.icon"
                          size="mini"
                          :key="btn.name"
                          @click="clickEvent(btn, $event)"
                          >{{ btn.name }}
                        </el-button>
                        <el-button
                          type="primary"
                          size="mini"
                          @click="subEditAll()"
                          v-if="editall"
                          :key="btn.name + 'save'"
                          >保存</el-button
                        >
                        <el-button
                          type="info"
                          size="mini"
                          @click="cancelEditAll()"
                          v-if="editall"
                          :key="btn.name + 'cancle'"
                          >取消</el-button
                        >
                      </template>
                      <template v-else>
                        <el-button
                          v-if="btn.status === '1' && btn.location === '2'"
                          :type="btn.styleType"
                          :icon="btn.icon"
                          size="mini"
                          v-preventReClick
                          :disabled="
                            btn.show != null &&
                            btn.show != undefined &&
                            btn.show != ''
                              ? !dynamicEval($data, btn.show)
                              : false
                          "
                          @click="clickEvent(btn, $event)"
                          :key="btn.name"
                          >{{ btn.name }}
                        </el-button>
                      </template>
                    </template>
                  </template>
                </template>
              </el-col>
              <!-- 列筛选 -->
              <el-popover
                v-if="tableData.length > 0"
                title="列筛选"
                trigger="click"
                style="float: right; margin-right: 10px"
              >
                <el-checkbox
                  style="display: block"
                  v-for="(item, index) in tableData"
                  :key="index"
                  :label="item.name"
                  v-model="item.show"
                  >{{ item.name }}
                </el-checkbox>
                <el-button size="small" slot="reference">
                  <i class="el-icon-arrow-down el-icon-menu"></i>
                </el-button>
              </el-popover>
              <!-- 列筛选 -->
            </el-row>
            <template v-if="tableData.length > 0">
              <!--列表数据-->
              <dynamic-tree-table
                ref="treeTable"
                v-if="type == 'tree_table'"
                :list="list"
                @handleSelectionChange="handleSelectionChange"
                @editChanged="editChanged($event)"
                @SetFlag="SetFlag()"
                :options="options"
                :columns="tableData"
                :operates="operates"
                :flag="flag"
                :diff="70"
              >
              </dynamic-tree-table>
              <template v-else>
                <dynamic-table
                  ref="dyTable"
                  :list="list"
                  @handleSelectionChange="handleSelectionChange"
                  @handleNodeClick="handleNodeClick"
                  @editChanged="editChanged($event)"
                  :options="options"
                  :columns="tableData"
                  :operates="operates"
                  :diff="120"
                >
                </dynamic-table>
                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                />
              </template>
              <!-- <dynamic-table
              :list="list"
              @handleSelectionChange="handleSelectionChange"
              :options="options"
              @updateList="getConfig"
              @editChanged="editChanged($event)"
              :columns="tableData"
              :operates="operates"
              :diff="120"
            >
            </dynamic-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            /> -->
            </template>
          </template>
        </div>
      </div>
    </section>

    <!-- 添加或修改对话框 -->
    <el-dialog
      ref="addForm"
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="500px"
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <dynamic-form
        :addform="addFormData"
        :form="form"
        :rules="rules"
        :addurl="addurl"
        v-on:openChanged="openChanged($event)"
      >
      </dynamic-form>
    </el-dialog>
    <!-- 添加或修改对话框 -->
    <el-dialog
      ref="formTable"
      :title="title"
      :visible.sync="topen"
      v-if="topen"
      width="80%"
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <dynamic-form-table
        :exsitId="exsitId"
        :geturl="geturl"
        :submiturl="addurl"
        v-on:topenChanged="topenChanged($event)"
        :table="table"
        :form="form"
      >
      </dynamic-form-table>
    </el-dialog>
  </div>
</template>
<script>
import dynamicForm from '@/views/components/dynamicForm'
import dynamicTable from '@/views/components/dynamicTable'
import dynamicFormTable from '@/views/components/dynamicFormTable'
import dynamicTreeTable from '@/views/components/dynamicTreeTable'
import {
  baseRequest,
  getDataList,
  getConfigInfo,
  getFolderTree,
  delData,
  exportData,
  getData,
  getAddForm
} from '@/api/dynamic/dynamic'
import dynamicTree from '@/views/components/dynamicTree.vue'
import { deepClone, filter2sub } from '@/utils'

export default {
  components: {
    dynamicForm,
    dynamicTable,
    dynamicTree,
    dynamicTreeTable,
    dynamicFormTable,
    resizeBar: () => import('@/views/components/resizeBar'),
    portalView: () => import('@/views/portal/index')
  },
  data() {
    return {
      activeName: 'tree',
      treeCurrent: 0,
      // 遮罩层
      // 加载层信息
      loading: [],
      // 选中数组
      ids: [],
      selected: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      topen: false,
      show: true,
      pageTitle: '',
      options: {
        // table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
        expandColumn: 'folderName'
      },
      exsitId: [],
      params: {},
      dataInfo: null,
      toolbarData: [],
      searchFormData: [],
      tableData: [],
      treeMenu: [],
      treeData: [],
      commandData: [],
      list: [],
      operates: {
        // 列操作按钮
        width: 150,
        list: []
      },
      queryConfigParams: {},
      queryTreeParams: {},
      dataUrl: undefined,
      queryParams: {
        pageNum: 1,
        pageSize: 30
      },
      form: {},
      rules: {},
      addFormData: [],
      type: '',
      portal: null,
      flag: true,
      addurl: '',
      geturl: '',
      table: 'table',
      parentid: 0,
      projectid: null,
      operational: '1'
    }
  },
  created() {
    //let params = this.params.pageParams?this.params:this.$route.query;
    let params = this.$route.query
    this.projectid = this.projectid ? this.projectid : this.$route.params.Id
    if (typeof params.pageParams == 'string') {
      this.params = params = JSON.parse(
        sessionStorage.getItem('index_child' + this.$route.params.Id)
      )
      this.$route.meta.breadcrumb = params.breadcrumb
    } else {
      params.breadcrumb = this.$route.meta.breadcrumb
      sessionStorage.setItem(
        'index_child' + this.$route.params.Id,
        JSON.stringify(params)
      )
      this.params = params
    }
    if (params.pageParams && params.rowParams) {
      this.dataInfo = params.rowParams
      // console.log(this.dataInfo)
      this.operational = params.rowParams.operational
      this.queryConfigParams.command = params.pageParams.treeCommand
      this.queryConfigParams.treeMenu = params.pageParams.treeMenu
      this.getConfig()
    } else {
      this.msgError('缺少参数')
      return false
    }
  },
  updated() {
    let ele = this.$refs.dyTable || this.$refs.treeTable
    if (ele) {
      ele.tableresize()
    }
  },
  methods: {
    /** 获取配置信息 */
    getConfig() {
      this.loading = true
      this.treeData = []
      getConfigInfo(this.queryConfigParams).then(response => {
        this.commandData = response.data.commandData
        this.loading = false
        var treeInfo = {}
        // console.log(this.params.rowParams)
        treeInfo.id = this.$route.params.Id
        treeInfo.label = this.params.rowParams.name
        treeInfo.children = []
        // treeInfo.url = this.commandData[0].url;
        // treeInfo.pageParams = this.commandData[0].pageParams;
        treeInfo.parentid = -1
        this.treeData.push(treeInfo)
        var url = this.getUrl(this.params.pageParams.url)
        this.getTree(url)
        this.handleNodeClick(treeInfo)
      })
    },
    getTreeConfig() {
      this.loading = true
      getConfigInfo(this.queryTreeParams).then(response => {
        this.tableData = response.data.tableData
        this.searchFormData = response.data.searchFormData
        if (this.operational !== '0') {
          this.toolbarData = response.data.toolbarData
          this.operates.list = response.data.commandData
        }
        this.loading = false
      })
    },
    /** 获取树形数据 */
    getTree(url) {
      this.loading = true
      getFolderTree(url).then(response => {
        response.data.forEach((item, index) => {
          response.data[index].label = item.folderName
          response.data[index] = this.normalizer(item)
        })
        this.treeData[0].children = this.handleTree(response.data, 'id')
        // this.treeData[0].children=response.data;
        this.loading = false
      })
    },
    /** 转换数据结构 */
    normalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentid: node.parentid,
        url: this.commandData[1].url,
        pageParams: this.commandData[1].pageParams
      }
    },
    /** 获取列表数据 */
    getList() {
      this.loading = true
      this.list = []
      getDataList(
        this.dataUrl,
        this.type == 'tree_table' ? {} : this.queryParams
      ).then(response => {
        this.list = response.rows
        this.total = response.total
        this.exsitId = this.list.map(item => item.id)
        this.$forceUpdate()
        this.loading = false
        this.flag = true
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.selected = selection
    },
    //查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 30
      }
      this.handleQuery()
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    // 节点单击事件
    handleNodeClick(data) {
      // let pageParams =eval ("(" + data.pageParams + ")");
      if (this.treeCurrent != data.id) {
        if (data.parentid === -1) {
          this.parentid = 0
        } else {
          this.parentid = data.id
        }
        if (data.parentid == -1) {
          data.pageParams = this.commandData[0].pageParams
          data.url = this.commandData[0].url
        } else if (data.children && data.children.length > 0) {
          let commandData = this.commandData[1] || this.commandData[0]
          data.pageParams = commandData.pageParams
          data.url = commandData.url
        } else {
          let commandData =
            this.commandData[2] || this.commandData[1] || this.commandData[0]
          data.pageParams = commandData.pageParams
          data.url = commandData.url
        }
        this.treeCurrent = data.id
        let pageParams = JSON.parse(data.pageParams.replace(/'/g, '"'))
        this.type = pageParams.type || 'table'
        this.queryTreeParams = {}
        this.portal = false
        if (pageParams.portal !== '' && pageParams.portal !== undefined) {
          this.portal = pageParams
          return
        }
        if (pageParams.command !== '' && pageParams.command !== undefined) {
          this.queryTreeParams.command = pageParams.command
        }
        if (pageParams.table !== '' && pageParams.table !== undefined) {
          this.queryTreeParams.table = pageParams.table
        }
        if (pageParams.form !== '' && pageParams.form !== undefined) {
          this.queryTreeParams.form = pageParams.form
        }
        if (pageParams.toolbar !== '' && pageParams.toolbar !== undefined) {
          this.queryTreeParams.toolbar = pageParams.toolbar
        }
        this.getTreeConfig()
        this.queryParams = {
          pageNum: 1,
          pageSize: 30
        }
        if (this.type != 'table') {
          this.queryParams = {}
        }
        // if (url.indexOf("{") != -1) {
        //   // var substr1 = url.substring(url.indexOf("?") + 1, url.indexOf("="));
        //   // var substr2 = url.substring(url.indexOf("{") + 1, url.indexOf("}"));
        //   // url = url.substring(0, url.indexOf("?"));
        //   // this.queryParams[substr1] = data[substr2];
        //   url = this.getUrl(data.url, this.$data);
        // }
        this.dataUrl = this.getUrl(data.url, this.$data)
        this.getList()
      }
    },
    clickEvent(obj) {
      if (obj.type === '2') {
        this.$router.push({ path: obj.url })
      } else {
        // let pageParams =eval ("(" + obj.pageParams + ")");
        let pageParams = JSON.parse(obj.pageParams.replace(/'/g, '"'))
        if (pageParams.handle == 'handleDelete') {
          //删除
          this.handleDelete(obj.url, obj.description)
        } else if (pageParams.handle == 'handleRemove') {
          //移除
          this.handleRemove(obj.url)
        } else if (pageParams.handle == 'handleExport') {
          this.handleExport(obj.url)
        } else if (pageParams.handle == 'handleConfirm') {
          this.handleConfirm(
            obj.url,
            pageParams.method,
            obj.description,
            pageParams.condition
          )
        } else if (pageParams.handle == 'handleAdd') {
          if (pageParams.type == 'table') {
            this.handleAddExited(obj)
          } else {
            this.handleAdd(obj.url, pageParams.addForm, obj.name)
          }
        } else if (pageParams.handle == 'handleUpdate') {
          this.handleUpdate(obj.url, pageParams.addForm, obj.name)
        }
      }
    },
    handleConfirm(url, method, title, condition) {
      let jugement = this.jugeCondition(condition, url, title)
      if (jugement.flag) {
        this.$confirm(jugement.info, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            baseRequest(jugement.route, method, {}, {}).then(response => {
              if (response.code == 200) {
                this.msgSuccess(response.msg)
                this.getConfig()
                return true
              } else {
                this.msgError(response.msg)
                return true
              }
            })
          })
          .catch(() => {
            this.msgInfo('已取消')
          })
      }
    },
    handleShow() {
      this.show = !this.show
    },
    /** 新增按钮操作 */
    handleAdd(url, str, title) {
      this.addurl = url
      this.getFormData(str, true)
      this.form = { parentid: this.parentid, projectid: this.projectid }
      this.open = true
      this.title = title
    },
    // 添加已存在
    handleAddExited(obj) {
      // let pageParams =eval ("(" + obj.pageParams + ")");
      let pageParams = JSON.parse(obj.pageParams.replace(/'/g, '"'))
      this.addurl = obj.url
      this.title = obj.name
      this.table = pageParams.table
      this.geturl = pageParams.getUrl
      this.form = { parentid: this.parentid, projectid: this.projectid }
      this.topen = true
    },
    /** 修改按钮操作 */
    handleUpdate(url, str, title) {
      this.addurl = url
      this.open = true
      this.title = '编辑'
    },
    /** 删除按钮操作 */
    handleDelete(url, title) {
      const ids = this.ids
      this.$confirm(
        `是否确认${title} "${this.selected[0].name ||
          this.selected[0].title ||
          this.selected[0].fileName ||
          this.selected[0].folderName}" ${this.ids.length > 1 ? '等' : ''}`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delData(url, ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(function() {})
    },
    /** 移除按钮操作 */
    handleRemove(url, title) {
      const ids = this.ids
      this.$confirm(
        `是否确认${title} "${this.selected[0].name ||
          this.selected[0].title ||
          this.selected[0].fileName ||
          this.selected[0].folderName}" ${this.ids.length > 1 ? '等' : ''}`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delData(url, ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('移除成功')
        })
        .catch(function() {})
    },
    /** 导出按钮操作 */
    handleExport(url) {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return exportData(url, queryParams)
        })
        .then(response => {
          this.download(response.msg)
        })
        .catch(function() {})
    },
    openChanged(val) {
      this.open = false
      if (val) {
        this.refreshCurrent()
      }
    },
    topenChanged(val) {
      this.topen = false
      if (val) {
        this.refreshCurrent()
      }
    },
    editChanged(val) {
      this.addurl = this.getUrl(val.url)
      this.getFormData(val.str)
      this.form = {}
      if (val.url) {
        if (val.url != '/doc/UpdateFile') {
          getData(val.url, val.id).then(response => {
            this.form = response.data
            this.open = true
            this.title = val.title ? val.title : '编辑'
          })
        } else {
          this.form = {
            id: val.id,
            fileList: [],
            projectid: this.projectid,
            parentid: this.parentid
          }
          this.open = true
          this.title = val.title ? val.title : '编辑'
        }
      } else {
        this.open = true
        this.title = val.title ? val.title : '编辑'
      }
    },
    //获取表单数据
    getFormData(str, flag = false) {
      let formData = {}
      let optionData = JSON.parse(sessionStorage.getItem('optionsData'))
      getAddForm({ addForm: str }).then(response => {
        formData = response.data
        formData.forEach((item, index) => {
          if (
            item.componentType === 'el-select' ||
            item.componentType === 'el-selects' ||
            item.componentType === 'el-radio' ||
            item.componentType === 'el-checkbox-group'
          ) {
            if (
              item.prop === 'policyid' ||
              item.prop === 'stateid' ||
              item.prop === 'ownerid'
            ) {
              formData[index].optionValue = optionData[item.optionValue]
            } else {
              if (
                this.tempDicts[item.prop] &&
                this.tempDicts[item.prop].length > 0
              ) {
                formData[index].optionValue = this.selectNormalizer(
                  deepClone(this.tempDicts[item.prop])
                )
              } else {
                if (item.optionValue.indexOf('url') > -1) {
                  let url = this.getUrl(item.optionValue.split(':')[1])
                  getDataList(url).then(response => {
                    if (response.code == 200) {
                      formData[index].optionValue = response.rows
                    }
                  })
                } else {
                  this.getDicts(item.optionValue).then(response => {
                    this.tempDicts[item.prop] = deepClone(response.data)
                    formData[index].optionValue = this.selectNormalizer(
                      response.data
                    )
                  })
                }
              }
            }
          }
          if (item.componentType === 'el-cascader') {
            let optionarr = item.optionValue.split('?')
            if (optionarr.length > 1) {
              this.optionNormalizer(optionData[optionarr[0]])
              let typearr = []
              optionData[optionarr[0]].forEach(titem => {
                if (titem.value === parseInt(optionarr[1])) {
                  typearr.push(titem)
                  formData[index].optionValue = typearr
                }
              })
            } else {
              formData[index].optionValue = this.optionNormalizer(
                optionData[item.optionValue]
              )
            }
          }
        })
        this.addFormData = formData
        if (flag) {
          for (let item of this.addFormData) {
            if (this.form[item.prop] == undefined) {
              this.$set(
                this.form,
                item.prop,
                item.defaultValue ? item.defaultValue : null
              )
            }
          }
          console.log(this.form)
        }
      })
    },
    /** 转换选项数据结构 */
    optionNormalizer(data) {
      data.forEach((item, index) => {
        data[index] = {
          value: item.id,
          label: item.description,
          parentid: item.parentid
        }
      })
      return this.handleTree(data, 'value')
    },
    /** 转换选项数据结构 */
    selectNormalizer(data) {
      data.forEach((item, index) => {
        data[index] = {
          id: item.dictValue,
          description: item.dictLabel
        }
      })
      return data
    },
    SetFlag() {
      this.flag = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  margin: 0;
  position: relative;
}
.collapesbutton {
  width: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: none;
  margin: auto 0;
  z-index: 2000;
}
.treeMenu {
  background-color: #f8f8f8;
  height: 100%;
  position: relative;
}
.treeMenu .el-tabs--border-card {
  height: 100%;
}
.app-container .head-container {
  padding-left: 5px;
  padding-right: 5px;
  border-top: 1px solid #d8d8d8;
}

.el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.page-title {
  background: #fff;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  /*margin-bottom: 5px;*/
}

.headerContent {
  float: left;
  padding: 20px 0 10px;
  width: 100%;
}

.extendedHeader {
  display: block;
  line-height: 23px;
  white-space: nowrap;
}

.extendedHeader.name {
  font-size: 16px;
  font-weight: bold;
  font-family: '3dsregular', Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.content {
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex {
  display: flex;
}
.el-col-21[data-v-761087fc] {
  width: 87.5%;
}

.infinite-list {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.infinite-list-item {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.infinite-list-item.selected {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.el-dropdown {
  padding: 10px;
  border-right: 1px solid #c3c3c3;
}

.mainContent {
  float: left;
  width: 100%;
  padding: 0 5px;
  height: 100%;
}

.extendedMain {
  display: block;
  line-height: 23px;
  white-space: nowrap;
}

.extendedMain.name {
  font-size: 16px;
  font-weight: bold;
  font-family: '3dsregular', Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedMain.content {
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
}

.extendedMain.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
  background-color: #f8f8f8;
}
//去掉最上级的before  after 即是去电最上层的连接线
/deep/ .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
.el-col-21 {
  width: 86%;
  float: right;
}
.max-size {
  width: 100% !important;
  max-width: 100% !important;
  // padding-left:16px!important;
}
</style>
